<template>
  <Select v-model:value="incomeType" style="width: 200px; position: absolute; z-index: 9899; right: 10px; top: 5px">
    <Select.Option value="all">全部</Select.Option>
    <Select.Option value="Q4">年报</Select.Option>
    <Select.Option value="Q2">中报</Select.Option>
    <Select.Option value="Q1">一季报</Select.Option>
    <Select.Option value="Q3">三季报</Select.Option>
  </Select>
  <Table :columns="incomeColumns" :scroll="{ x: 1200, y: contentHeight - 40 }" :pagination="false" :data-source="incomes" size="small" bordered></Table>
</template>
<script setup>
  import { useRoute } from 'vue-router';
  import { ref, watch, watchEffect, h, inject, onActivated, onMounted, reactive } from 'vue';
  import { Select, Table } from 'ant-design-vue';

  import { friendlyDate, friendlyNumbers } from '@/libs/helpers.js';

  const props = defineProps({
    code: {
      type: String
    },
    contentHeight: {
      type: Number
    }
  });

  const $route = useRoute();
  const $http = inject('$http');

  const incomes = ref([]);
  const chartTitle = ref('');
  const incomeType = ref('all');

  const incomeColumns = reactive([
    {
      title: '序号',
      width: 40,
      align: 'center',
      customRender: ({ record, index }) => {
        return index + 1;
      }
    },
    { title: '报告名称', width: 70, customRender: ({ record }) => record.report_name, ellipsis: true },
    { title: '报告日期', width: 70, customRender: ({ record }) => friendlyDate(record.report_date), ellipsis: true },
    {
      title: '营业总收入',
      width: 110,
      ellipsis: true,
      customRender: ({ record }) => {
        let rs = friendlyNumbers(record.revenue[0]);

        return h('div', { class: 'complexs' }, [
          h('span', rs),
          h(
            'b',
            {
              style: {
                color: record.revenue[1] >= 0 ? '#ed4014' : '#19be6b'
              }
            },
            !record.revenue[1] ? 'N/A' : (record.revenue[1] * 100).toFixed(2) + '%'
          )
        ]);
      }
    },
    {
      title: '营业总成本',
      width: 110,
      ellipsis: true,
      customRender: ({ record }) => {
        let rs = friendlyNumbers(record.operating_costs[0]);

        return h('div', { class: 'complexs' }, [
          h('span', rs),
          h(
            'b',
            {
              style: {
                color: record.operating_costs[1] >= 0 ? '#ed4014' : '#19be6b'
              }
            },
            !record.operating_costs[1] ? 'N/A' : (record.operating_costs[1] * 100).toFixed(2) + '%'
          )
        ]);
      }
    },
    {
      title: '营业利润',
      width: 110,
      ellipsis: true,
      customRender: ({ record }) => {
        let rs = friendlyNumbers(record.op[0]);

        return h('div', { class: 'complexs' }, [
          h('span', rs),
          h(
            'b',
            {
              style: {
                color: record.op[1] >= 0 ? '#ed4014' : '#19be6b'
              }
            },
            !record.op[1] ? 'N/A' : (record.op[1] * 100).toFixed(2) + '%'
          )
        ]);
      }
    },
    {
      title: '利润总额',
      width: 110,
      ellipsis: true,
      customRender: ({ record }) => {
        let rs = friendlyNumbers(record.profit_total_amt[0]);

        return h('div', { class: 'complexs' }, [
          h('span', rs),
          h(
            'b',
            {
              style: {
                color: record.profit_total_amt[1] >= 0 ? '#ed4014' : '#19be6b'
              }
            },
            !record.profit_total_amt[1] ? 'N/A' : (record.profit_total_amt[1] * 100).toFixed(2) + '%'
          )
        ]);
      }
    },
    {
      title: '净利润',
      width: 110,
      ellipsis: true,
      customRender: ({ record }) => {
        let rs = friendlyNumbers(record.net_profit[0]);

        return h('div', { class: 'complexs' }, [
          h('span', rs),
          h(
            'b',
            {
              style: {
                color: record.net_profit[1] >= 0 ? '#ed4014' : '#19be6b'
              }
            },
            !record.net_profit[1] ? 'N/A' : (record.net_profit[1] * 100).toFixed(2) + '%'
          )
        ]);
      }
    }
  ]);

  async function RenderMetric() {
    let rs = await $http.get(`/api/shares/${props.code}/income?type=${incomeType.value}`);

    incomes.value = rs.data.list;
    chartTitle.value = rs.data.quote_name || $route.query.title;
  }

  watch(incomeType, async () => await RenderMetric());

  watch($route, async () => {
    props.code = $route.params.code;
    chartTitle.value = $route.query.title;

    await RenderMetric();
  });

  watchEffect(async () => {
    await RenderMetric();
  });

  onActivated(async () => {
    await RenderMetric();
  });

  onMounted(async () => {
    await RenderMetric();
  });
</script>
<style lang="less" scoped>
  :deep(.complexs) {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
  }
</style>
